<template>
  <content-box :title="`当班${statusList[1].label}原因占比`" :btn-label="`当班${statusList[1].label}原因占比明细`" @toDetail="showDetail" :loading="loading" :disable="!stopData.length" :remark="remark" :showIndex="false">
    <template slot="left">
      <div class="not-fill-detail" @click="toStopList">
        查看更多
        <q-icon name="iconfont icontubiao2-95" size="16px" style="margin-top: -2px"/>
      </div>
    </template>
    <div class="chart" ref="chart" id="chart" style="height: 300px"/>
    <table-basic ref="stopDetail" type="stop" :label="`${statusList[1].label}占比`"/>
  </content-box>
</template>

<script>
import contentBox from './content-box'
import { addListener } from 'resize-detector'
import echarts from 'echarts'
import chart from './chart-option'
import TableBasic from './table-basic'
import { getStopChart } from 'src/boot/status-monitor/status-overview'
import { mapGetters } from 'vuex'
export default {
  name: 'stop-rate',
  computed: {
    ...mapGetters(['statusList']),
    remark () {
      return [
        `图表：${this.statusList[1].label}时长之和/运行时长之和`,
        `${this.statusList[1].label}时长：当班开始时间至当前时间，所选层级下设备该${this.statusList[1].label}原因时长总和`,
        `运行时长：当班开始时间至当前时间，所选层级下设备${this.statusList[1].label}时长与${this.statusList[0].label}时长总和`,
        `明细：设备${this.statusList[1].label}时长/设备运行时长`,
        `${this.statusList[1].label}时长：当班开始时间至当前时间，单台设备该${this.statusList[1].label}原因时长总和`,
        `运行时长：当班开始时间至当前时间，单台设备${this.statusList[1].label}时长与${this.statusList[0].label}时长总和`
      ]
    }
  },
  components: {
    TableBasic,
    contentBox
  },
  data () {
    return {
      title: '当班停机原因占比',
      chart: null,
      loading: false,
      stopData: [],
      params: {} // 图表请求参数
    }
  },
  mounted () {
    addListener(this.$refs.chart, this.$utils.debounce(() => {
      if (this.$route.name !== 'statusOverview') {
        return
      }
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      } else {
        this.chart.resize()
        this.setOption()
      }
    }, 100))
  },
  methods: {
    toStopList () {
      this.$router.push({
        name: 'stopReporting'
      })
    },
    showDetail () {
      this.$refs.stopDetail.showDetail(this.params)
    },
    clearData () {
      this.stopData = []
      this.setOption()
    },
    // 获取图表数据
    getStopChart (time, workshopId, lineId) {
      this.loading = true
      let params = {
        ...time
      }
      lineId !== 'all' && (params['lineId'] = lineId)
      lineId === 'all' && (params['workshopId'] = workshopId)
      this.params = params
      getStopChart(params).then(res => {
        let stopData = []
        if (res.length) {
          stopData = res.map(item => {
            const runningTime = this.$utils.label(item.runningTime, 0)
            return {
              name: this.$utils.label(item.name),
              value: this.$utils.label(item.value, 0),
              percent: runningTime ? Number(this.$utils.label(item.value, 0) / runningTime * 100).toFixed(2) : 0.00
            }
          })
        }
        this.stopData = stopData
        this.setOption(this.stopData)
      }).finally(() => {
        this.loading = false
      })
    },
    // 生成图表参数
    setOption (data = this.stopData) {
      if (this.chart === null) {
        this.chart = echarts.init(this.$refs.chart)
      }
      const option = chart.getRateBar(data, ['#44D8C6', '#5F77FD'], document.getElementById('chart'))
      this.chart.setOption(option)
    }
  }
}
</script>

<style scoped lang="stylus">
.not-fill-detail{
  color $primary;
  cursor pointer;
  user-select none;
  font-size 14px;
}

</style>
